<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="所属区县">
            <el-select v-model="searchForm.areaCode" placeholder="请选择">
              <el-option
                v-for="item in areaList"
                :key="item.areaCode"
                :label="item.area"
                :value="item.areaCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="汽修站名称">
            <el-input v-model="searchForm.repairName" placeholder="请输入汽修站名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="handleRestSearch">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
            <el-button type="success" :loading="isExportLoading" @click="handleExport"
              >导出</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <div v-if="totalAmount > 0" class="flex items-center">
          <div class="font-bold mr-2 text-[18px]">总计:</div>
          <el-statistic :value="totalAmount" />
        </div>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="汽修站名称" prop="repairName" align="center"></el-table-column>
      <el-table-column label="总订单数量" prop="totalNum" align="center"></el-table-column>
      <el-table-column label="总金额" prop="totalAmount" align="center"></el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import useExcel from "@/hooks/useExcel";
import { useInitTable } from "@/hooks/useCommon";
import { getRepairShopOrderStatisticsApi } from "@/api/repair";
import { getAreaListApi } from "@/api/user";
// 表格数据
const tableData = ref<any>([]);
const total = ref(0);
const totalAmount = ref(0);
const { searchForm, currentPage, limit, handleRestSearch, handleGetTableList } = useInitTable({
  searchForm: {
    repairName: "",
    areaCode: ""
  },
  getTableList: getRepairShopOrderStatisticsApi,
  success: (res: any) => {
    tableData.value = res.data;
    total.value = res.total;
    totalAmount.value = res.extension.totalAmount;
  }
});
// 导出
const { downloadExcel } = useExcel();
const isExportLoading = ref(false);
const handleExport = async () => {
  isExportLoading.value = true;
  let isContinue = true;
  let current = 1;
  const pageSize = 500;
  let curItem: any = [];
  let isError = false;
  while (isContinue) {
    try {
      const res: any = await getRepairShopOrderStatisticsApi({
        areaCode: searchForm.areaCode,
        repairName: searchForm.repairName,
        current,
        pageSize
      });
      curItem = [...curItem, ...res.data];
      current++;
      isContinue = current <= res.pageNum;
    } catch (error) {
      isError = true;
      isContinue = false;
    }
  }
  isExportLoading.value = false;
  if (isError) {
    return ElMessage.error("导出失败");
  }
  if (!curItem.length) {
    return ElMessage.error("暂无数据");
  }
  handleDownload(curItem);
};
const handleDownload = (curItem: any) => {
  const newItem = curItem.map((item: any) => {
    return [item.repairName, item.totalNum, item.totalAmount];
  });
  newItem.unshift(["汽修站名称", "总订单数量", "总金额"]);
  downloadExcel("维修统计", newItem, "维修统计");
};
// 获取区县列表
const areaList = ref<any>([]);
const handleGetAreaList = async () => {
  const res: any = await getAreaListApi();
  areaList.value = res;
};

onMounted(() => {
  handleGetAreaList();
});
</script>
<style scoped lang="scss"></style>
